import { FC, ReactElement, useEffect, useState } from 'react'
import {
  EvaluationStateType,
  Loading,
  connect,
  Location,
  Dispatch,
  history
} from 'umi'
import { Table, Radio } from 'antd'
import { setStorage } from '@/utils'
import styles from './index.less'
interface IProps {
  location: Location
  dispatch: Dispatch
  evaluationModel: EvaluationStateType
}

const ArbitrationResource: FC<IProps> = ({
  location,
  dispatch,
  evaluationModel
}): ReactElement => {
  const { batchCode } = location.query as {
    batchCode: string
  }
  const { finalResource, scoreRules } = evaluationModel
  const [pageNum, setPageNum] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(10)
  const [total, setTotal] = useState<number>(10)
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (text: string, record: any, index: number) => (
        <span>
          {((pageNum - 1) * pageSize + (index + 1)).toString().padStart(2, '0')}
        </span>
      )
    },
    {
      title: '学校名称',
      dataIndex: 'unitName',
      key: 'unitName',
      align: 'center'
    },
    {
      title: '指标名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center'
    },
    {
      title: '一评得分',
      dataIndex: 'lamby1',
      key: 'lamby1',
      render: (text: string, record: any, index: number) => {
        return (
          <Radio.Group value={record.lamby1.ruleCode}>
            {scoreRules.map((item) => (
              <Radio value={item.code} key={item.code}>
                {item.name}
              </Radio>
            ))}
          </Radio.Group>
        )
      },
      align: 'center'
    },
    {
      title: '二评得分',
      dataIndex: 'lamby2',
      key: 'lamby2',
      render: (text: string, record: any, index: number) => {
        return (
          <Radio.Group value={record.lamby2.ruleCode}>
            {scoreRules.map((item) => (
              <Radio value={item.code} key={item.code}>
                {item.name}
              </Radio>
            ))}
          </Radio.Group>
        )
      },
      align: 'center'
    },
    {
      title: '操作',
      dataIndex: 'lamby2',
      key: 'lamby2',
      render: (text: string, record: any, index: number) => {
        return (
          <span
            className={styles['go-handle']}
            onClick={() => handleArbitration(record)}
          >
            前往处理
          </span>
        )
      },
      align: 'center'
    }
  ]

  const handleArbitration = (record: any) => {
    const {
      unitName,
      unitCode,
      parentCode,
      name,
      questionCode,
      lamby1,
      lamby2
    } = record
    setStorage('schoolCode', unitCode)
    setStorage('breadcrumb', name)
    setStorage('code', questionCode)
    setStorage('lamby1', lamby1.ruleCode)
    setStorage('lamby2', lamby2.ruleCode)
    setStorage('schoolName', unitName)
    history.replace({
      pathname: '/arbitration/handle',
      query: {
        parentCode: parentCode,
        batchCode,
        questionCode: questionCode,
        type: '03'
      }
    })
  }

  // 获取打分规则
  const getScoringRules = () => {
    dispatch({
      type: 'evaluationModel/function_getScoringRules',
      payload: {
        ruleCode: '50'
      }
    })
  }

  const handlePageChange = (page: number): void => {
    setPageNum(page)
  }
  const paginationProps = {
    current: pageNum, //当前页码
    showTotal: () => <span>总共{total}项</span>,
    total, // 总条数
    onChange: (page: number) => handlePageChange(page), //改变页码的函数
    hideOnSinglePage: false,
    showSizeChanger: false
  }

  const getFinalResource = () => {
    dispatch({
      type: 'evaluationModel/function_getFinalResource',
      payload: {
        batchCode
      }
    })
  }

  useEffect(() => {
    getScoringRules()
    getFinalResource()
  }, [])

  useEffect(() => {
    setTotal(finalResource.length)
  }, [finalResource])
  return (
    <div className={styles['page-wrapper']}>
      <div className={styles['main-content']}>
        <div className={styles['pannel-title']}>
          <span>仲裁列表</span>
        </div>
        <div className={styles['pannel-content']}>
          <Table
            dataSource={finalResource}
            columns={columns}
            pagination={paginationProps}
            rowKey="questionCode"
            bordered
          />
        </div>
      </div>
    </div>
  )
}

const mapStateToProps = ({
  evaluationModel,
  loading
}: {
  evaluationModel: EvaluationStateType
  loading: Loading
}) => {
  return {
    evaluationModel,
    evaluationLoding: loading.models.evaluationModel
  }
}

export default connect(mapStateToProps)(ArbitrationResource)
